﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="GB2312">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport">
		<title>借款详情-迅泊达</title>
		<link rel="shortcut icon" href="favicon.ico"/>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/loan.css" />
		<link rel="stylesheet" href="font/fanhui/iconfont.css" />
		<script src="js/jquery-1.11.2.min.js"></script>
		<script src="js/51size.js"></script>
		<script src="js/xbddai.js"></script>
		<script src="js/base.js"></script>
	</head>
	<body>
		<!--头部开始-->
		<header class="clearfix">
			<div class="header clearfix">
				<ul>
					<li style="width:15%">
						<a href="index.html">
							<i class="iconfont left-icon">&#xe64c;</i>
							<em>返回</em>
						</a>
					</li>
					<li id="title" style="width:70%">借款标详情</li>
				</ul>
			</div>
		</header>
		<!--头部结束-->
		<main>
			<div class="loan-money">
				<div class="data">
					<div class="comprehensive">
						<ul class="clearfix">
							<li>
								<a href="#">
									<em>借款金额</em><br />
									<i id="amount">0</i>
									<u>万元</u>
								</a>
							</li>
							<li>
								<canvas id="annular" width="200" height="200" style='width:9.5rem;height=9.5rem;margin-top: 0.4rem;'></canvas>
							</li>
							<li>
								<a href="#">
									<em>借入期限</em><br />
									<i id="deadline">3</i>
									<u id="util">个月</u>
								</a>
							</li>
						</ul>
					</div>
					<div class="project">
						<div class="project-in">
							<span>单次最大金额：<em id="max">不限</em>
							</span>
							<span>
								<em id="payMode">到期还本按月付息</em>
							</span>
						</div>
						<div class="project-in project-in2">
							<span>单次最小金额：<em id="min">100</em></span>
							<span>可投金额￥834131</span>
						</div>
					</div>									
				</div>
				<div class="name">
					<span>
						<em>借款人：</em>
						<i id="borrow_user">admin</i>
					</span>
					<span>
						<em>借款编号：</em>
						<i id="borrow_id">11338</i>
					</span>
				</div>
				<div class="biding">
					<input type="submit" value="立即投标"/>
				</div>
			</div>
			<div class="details">
				<span class="interval"></span>
				<ul class="clearfix details-list">
					<li><span>投标详情</span></li>
					<li class="loan-right-border"><span>审核报告</span></li>
					<li><span>投标记录</span></li>
				</ul>
				
			</div>
			<div class="show-loan-list">
				<dl class="loan-bid-informtion">
					<dd>
						<em>投标100元，年利率14.4%，期限15天</em><br />
						<i>可获得利息收益￥ <u>0.6</u>元</i>
					</dd>
					<dd>
						<em>总投标数</em>
						<i>24</i><u>次</u>
					</dd>
					<dd>
						<em>借款进度</em>
						<i>100</i><u>%</u>
					</dd>
					<dd>
						<em>审核时间</em>
						<i>2015-11-19  15:54</i>
					</dd>
				</dl>

				<dl>
					<dd>
						<em>投标100元，年利率14.4%，期限15天</em><br />
						<i>可获得利息收益￥ <u>0.6</u>元</i>
					</dd>
					<dd>
						<em>总投标数</em>
						<i>24</i><u>次</u>
					</dd>

				</dl>

				<dl>
					<dd>
						<em>投标100元，年利率14.4%，期限15天</em><br />
						<i>可获得利息收益￥ <u>0.6</u>元</i>
					</dd>
				</dl>
			</div>
		</main>
	</body>
</html>
 <script>
        window.onload = function () {
            var oAnnular = document.getElementById('annular');
		    var oGannular = oAnnular.getContext('2d');
		    var percentage = 18;
		    var SendOutTime ='10:10';

		    //标的id
		    var borrow_id=localStorage.getItem("borrow_id");
		    if(borrow_id==null){
		    	alert("数据加载异常,请稍后再试!");
		    	window.location.href="index.html";
		    	return false;
		    }

			$.ajax({
				type: 'POST',
	        	url:  baseUrl+'/app/borrow/detail',
	        	data:{id:borrow_id},
	        	async: false,
	        	success: function(result) {
	        		if(result.code == -1){
		        		var entity=result.entity;
		        		var util="";
	        			if("MONTH"==entity.dateUtil){
	        				util="个月";
	        			}else{
	        				util="天";
	        			}
	        			var paymentMode="";
	        			if (entity.paymentMode==1){
	        				paymentMode="一次性还款";
	        			}else if(entity.paymentMode==2){
							paymentMode="等额本息";
	        			}else if(entity.paymentMode==3){
	        				paymentMode="按月付息到期还本";
	        			}
                				        			
		        		var amount=entity.amount/10000;
		        		$("#amount").html(amount);
		        		$("#deadline").html(entity.deadline);
		        		$("#util").html(util);
		        		$("#title").html(entity.title);
		        		$("#payMode").html("还款方式:"+paymentMode);
		        		$("#borrow_user").html();
		        		$("#borrow_id").html(borrow_id);
		        		$("#max").html("￥"+entity.max);
		        		$("#min").html("￥"+entity.min);
	        		}else{
	        			alert("数据加载异常...")
	        		}

	        	}
	        });		    

		    function annularMotion() {
		        var x = 83;
		        var y = 83;
		        var r = 80;
		        //灰色圆圆开始
		        oGannular.beginPath();
		        oGannular.fillStyle = '#DFDFDF';
		        oGannular.moveTo(x, y);
		        oGannular.arc(x, y, r, (-90 + 0) * Math.PI / 180, (-90 + 360) * Math.PI / 180);
		        oGannular.closePath();
		        oGannular.fill();
		        //灰色圆结束
		        //白色圆开始
		        oGannular.beginPath();
		        oGannular.fillStyle = '#FFF';
		        oGannular.moveTo(x, y);
		        oGannular.arc(x, y, r - 6, (-90 + 0) * Math.PI / 180, (-90 + 360) * Math.PI / 180);
		        oGannular.closePath();
		        oGannular.fill();
		        //白色圆结束
		        //橘黄色圆环开始
		        //橘黄色圆开始
		        oGannular.beginPath();
		        oGannular.fillStyle = '#FE7801';
		        oGannular.moveTo(x, y);
		        oGannular.arc(x, y, r, (-90 + 0) * Math.PI / 180, (-90 + percentage * 3.6) * Math.PI / 180);
		        oGannular.closePath();
		        oGannular.fill();
		        //橘黄色圆结束
		        //白色圆开始
		        oGannular.beginPath();
		        oGannular.fillStyle = '#FFF';
		        oGannular.moveTo(x, y);
		        oGannular.arc(x, y, r - 9, (-90 + 0) * Math.PI / 180, (-90 + 360) * Math.PI / 180);
		        oGannular.closePath();
		        oGannular.fill();
		        //白色圆结束
		        //橘黄色圆环结束
		        
		        //  文字开始
		        if(percentage == 0){
		            oGannular.font = 'bold 2.5rem Arial';
		            oGannular.fillStyle = "#FE7801";
		            oGannular.fillText(SendOutTime,32,80);
		            
		            oGannular.font = 'bold 1.8rem Arial';
		            oGannular.fillStyle = "#FE7801";
		            oGannular.fillText('发标',55,120);
		        }
		        if(percentage>0 && percentage<100){
		            oGannular.font = 'bold 1.8rem Arial';
		            oGannular.fillStyle = "#FE7801";
		            oGannular.fillText('立即投标',24,120);
		            
		            oGannular.font = 'bold 2.5rem Arial';
		            oGannular.fillStyle = "#FE7801";
		            oGannular.fillText('%',92,80);
		            
		            oGannular.font = 'bold 3rem Arial';
		            oGannular.fillStyle = "#FE7801";
		            oGannular.fillText(percentage,35,80);
		            //  文字结束
		        }
		        if(percentage == 100){
		            oGannular.font = 'bold 1.8rem Arial';
		            oGannular.fillStyle = "#FE7801";
		            oGannular.fillText('正在还款',24,95);
		        }
		         //  文字结束
		    }
		    annularMotion();
   //   首页第一个进度环 结束 
        }
    </script>
